<template>
  <div>
    <!-- 加载动画 -->
    <div
      v-if="loading"
      v-loading="loading"
      style="width: 100%; height: 100vh"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
    ></div>

    <!-- 内容 -->
    <div v-if="VideoJsonLists && !loading">
      <!-- 视频详情页面 -->
      <!--内容 -->
      <div class="video-course-bg">
        <img :src="VideoJsonLists.info.pic" class="bg-filter" />
        <div class="bg-filter-after"></div>
        <div class="warp">
          <!-- 面包屑组件 -->
          <div class="breadcrumb default-border">
            <el-breadcrumb separator-class="el-icon-arrow-right" class="ul">
              <el-breadcrumb-item class="li" :to="{ path: '/' }"
                >首页</el-breadcrumb-item
              >
              <el-breadcrumb-item
                class="li"
                :replace="true"
                :to="{ path: '/videos' }"
              >
                视频课程
              </el-breadcrumb-item>
              <el-breadcrumb-item class="li">
                {{ VideoJsonLists.info.title }}
              </el-breadcrumb-item>
            </el-breadcrumb>
          </div>

          <!-- 插入视频组件 -->
          <course-video
            v-if="showvideo"
            :kiriton="kiriton"
            :sum="sum"
          ></course-video>

          <h1>{{ VideoJsonLists.info.title }}</h1>
          <div class="video-course-info">
            <div class="user-body">
              <img src="../assets/imgs/user-header.png" alt="" />
              <div class="user-name">
                <p>易学啦</p>
              </div>
            </div>
            <div class="video-course-classinfo">
              <span>年级：{{ VideoJsonLists.info.cate.title }}</span>
              <span>时长：{{ VideoJsonLists.info.duration }}</span>
              <span>学习人数：{{ VideoJsonLists.info.view }}</span>
              <span>发布时间：{{ VideoJsonLists.info.create_time }}</span>
            </div>
            <div class="share-course-info-icon">
              <i class="iconfont icon-shoucang"></i>
              <i class="iconfont icon-qq"></i>
              <i class="iconfont icon-wb"></i>
            </div>
          </div>
        </div>
      </div>

      <div class="warp main-body">
        <div class="video-course-title">
          <div class="course-tab">
            <li
              :class="['dis-block', speaktag ? '' : 'active']"
              @click="speaktag = false"
            >
              课程章节
            </li>
            <li
              :class="['dis-block', speaktag ? 'active' : '']"
              @click="speaktag = true"
            >
              用户评论({{ spsum }})
            </li>
          </div>
          <div class="course-download">
            <div>
              <span class="download-btn">视频打包下载</span>
              <span class="download-btn">视频单个下载</span>
            </div>
          </div>
        </div>

        <div class="video-course-body">
          <!-- 左侧列表 -->
          <div class="video-course-left">
            <!-- 内容介绍区域 -->
            <div class="video-info-content" v-show="!speaktag">
              <div class="video-course-intro">
                <span>简介：</span>
                <div>
                  <p>{{ VideoJsonLists.info.description }}</p>
                </div>
              </div>

              <!-- 视频列表 -->
              <div v-if="VideoJsonLists.list">
                <div
                  class="video-course-list"
                  v-for="items in VideoJsonLists.list"
                  :key="items.id"
                >
                  <!-- 视频列表标题 -->
                  <p>{{ items.title }}</p>

                  <div
                    :class="[
                      'video-list-item',
                      vflag == values.id ? 'video-con ' : '',
                    ]"
                    v-for="values in items.childs"
                    :key="values.id"
                    @click="showvideoFun(values.free, values.id)"
                  >
                    <div class="list-box">
                      <div class="list-box-title">
                        <i class="iconfont icon-bofang"></i>
                        <span>{{ values.title }}</span>
                      </div>
                      <span>免费</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 评论区 -->
            <div class="video-comment" v-show="speaktag">
              <div class="comment-box pad-20">
                <!-- 输入功能 -->
                <div class="comment-form">
                  <!-- 评论输入框 -->
                  <div class="el-input">
                    <input
                      type="text"
                      autocomplete="off"
                      placeholder="请输入评论内容"
                      class="el-input__inner"
                      v-model.trim="vals"
                    />
                  </div>
                  <!-- 评论输入框END -->

                  <!-- 评论输出按钮 -->
                  <el-button type="primary" @click="subimes(0, 0, 3)"
                    >发送</el-button
                  >
                </div>
                <!-- 输入功能END -->
                <div
                  class="comment-item"
                  v-for="(item, i) in videolists[0].userTalk"
                  :key="i"
                >
                  <div class="main-item">
                    <div class="userinfo">
                      <div class="flex">
                        <img
                          :src="item.userHeader"
                          width="40px"
                          height="40px"
                          class="user-header"
                        />
                        <div class="user-name">
                          <p>{{ item.userName }}</p>
                          <span>{{ item.sptimes || "2019-01-09" }}</span>
                        </div>
                      </div>
                      <div class="comment-other-op">
                        <div
                          class="comment-reply"
                          @click="speakbackFun(item.speakid)"
                        >
                          <i class="iconfont icon-changyonghuifu"></i> 回复
                        </div>
                        <div class="comment-report">
                          <i class="el-icon-warning-outline"></i> 举报
                        </div>
                      </div>
                    </div>
                    <div class="comment-content">{{ item.speak }}</div>

                    <!-- 输入功能 -->
                    <div
                      class="comment-form"
                      v-show="speakback == item.speakid"
                      style="margin-top: 15px; margin-left: 56px"
                    >
                      <!-- 评论输入框 -->
                      <div class="el-input">
                        <input
                          type="text"
                          autocomplete="off"
                          placeholder="请输入评论内容"
                          class="el-input__inner"
                          v-model.trim="values"
                        />
                      </div>
                      <!-- 评论输入框END -->

                      <!-- 评论输出按钮 -->
                      <el-button type="primary" @click="subimes(0, i, 1)"
                        >发送</el-button
                      >
                    </div>
                    <!-- 输入功能END -->
                  </div>

                  <!-- 回复 -->
                  <div
                    class="child-item"
                    v-for="(childitem, childi) in item.reply"
                    :key="childi"
                  >
                    <div class="userinfo">
                      <div class="flex">
                        <img
                          :src="childitem.userHeader"
                          width="40px"
                          height="40px"
                          class="user-header"
                        />
                        <div class="user-name">
                          <p>{{ childitem.userName }}</p>
                          <span>{{ childitem.sptime || "2020-10-11" }}</span>
                        </div>
                      </div>
                      <div class="comment-other-op">
                        <div
                          class="comment-reply"
                          @click="speakbackFun(childitem.speakid)"
                        >
                          <i class="iconfont icon-changyonghuifu"></i>
                          回复
                        </div>
                        <div class="comment-report">
                          <i class="el-icon-warning-outline"></i>
                          举报
                        </div>
                      </div>
                    </div>
                    <div class="comment-content">{{ childitem.speak }}</div>

                    <!-- 输入功能 -->
                    <div
                      class="comment-form"
                      v-show="speakback == childitem.speakid"
                      style="margin-top: 15px"
                    >
                      <!-- 评论输入框 -->
                      <div class="el-input">
                        <input
                          type="text"
                          autocomplete="off"
                          placeholder="请输入评论内容"
                          class="el-input__inner"
                          v-model.trim="values"
                        />
                      </div>
                      <!-- 评论输入框END -->

                      <!-- 评论输出按钮 -->
                      <el-button
                        type="primary"
                        @click="subimes(item.speakid, childi, 2)"
                        >发送</el-button
                      >
                    </div>
                    <!-- 输入功能END -->
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 右侧列表 -->
          <div class="video-course-right">
            <!-- 课程详情 -->
            <div class="video-course-learn">
              <div class="dis-block" @click.once="fristFun">开始学习</div>
              <h5>课程介绍</h5>
              <p>{{ VideoJsonLists.info.description }}</p>
              <h5>课程信息</h5>
              <p>
                本套课程共{{ sum }}节课，课程于{{
                  VideoJsonLists.info.create_time
                }}发布,总时长约{{ VideoJsonLists.info.duration }}
              </p>
            </div>
            <!-- 课程详情END -->

            <!-- 推荐课程 -->
            <div class="video-course-recommend">
              <div class="title">
                <h4>推荐课程</h4>
              </div>
              <ul class="video-course-recommend-ul" v-if="RightVideos">
                <!-- 分割线 -->
                <div class="jd-ad">
                  <div class="ads-info">
                    <div class="_1d006n6ggrg"></div>
                  </div>
                </div>
                <!-- 分割线END -->

                <div
                  class="li dis-block"
                  v-for="item in RightVideos"
                  :key="item.id"
                  @click="RunCpoy(item.id)"
                >
                  <img :src="item.pic" :alt="item.title" />
                  <div style="width: 183px">
                    <p class="userlist-ul-title">{{ item.title }}</p>
                    <p class="userlist-ul-i">
                      <span>
                        <i class="iconfont icon-time"></i>
                        {{ item.duration }}
                      </span>
                      <span>
                        <i class="iconfont icon-view"></i>
                        {{ item.view }}人学习
                      </span>
                    </p>
                  </div>
                </div>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <!--内容 END-->
    </div>
  </div>
</template>

<script>
import CourseVideo from "../components/CourseVideo.vue";
// import LoadingTag from "../components/LoadingTag.vue";
import { getRecommendList, getList } from "../api/videots.js";
export default {
  data() {
    return {
      loading: true, //判断加载动画是否显示
      showvideo: false, //判断视频组件是否显示
      speaktag: false, //判断评论是否显示
      disabled: false, //判断发送按钮是否可用
      speakback: null, //判断回复按钮是否可用
      frees: null, //判断VIP
      vflag: null, //判断当前视频组件是否显示并且点击开始学习按钮
      RightVideos: null, //推荐列表
      video: "", //视频地址
      te: "", //内容
      values: "", //输入内容
      vals: "", //输入内容
      videolists: null, //详情页对应数据
      keys: null, //详情页的Key值
      Videoids: null, //详情页的id值
      spid: 10,
      savelists: null, //存储容器
      VideoJsonLists: null, //数据遍历数组
      kiriton: null, //数据遍历数组
    };
  },
  methods: {
    getVideoJsonDataFun() {
      //获取数据遍历数组
      let idkeys = localStorage.getItem("copyids");
      getList({ id: idkeys }).then((data) => {
        this.VideoJsonLists = data.data;
        console.log("getList==>", this.VideoJsonLists);
      });
      setTimeout(() => {
        this.loading = false;
      }, 1200);
    },

    // 切换请求数据
    RunCpoy(id) {
      this.loading = true;
      localStorage.setItem("copyids", id);
      this.getVideoJsonDataFun();
      let html = document.documentElement;
      var timer = setInterval(() => {
        if (html.scrollTop <= 0) {
          clearInterval(timer);
        }
        html.scrollTop = html.scrollTop - 50;
      }, 10);

      setTimeout(() => {
        this.loading = false;
      }, 1200);
    },

    // 获取key值
    getKeys() {
      this.keys = localStorage.getItem("videokey");
      this.Videoids = localStorage.getItem("Videoids");
      console.log(this.keys, this.Videoids);
    },

    //获取热点推荐
    getRightVideo() {
      getRecommendList().then((data) => {
        this.RightVideos = data.data;
      });
    },

    // 回复按钮的显示隐藏
    speakbackFun(idname) {
      if (this.speakback == idname) {
        this.speakback = null;
        return;
      }
      this.speakback = idname;
    },

    // 发送评论
    subimes(key, index, funs) {
      // console.log("key", key);//一级下标
      // console.log("index", index);//二级下标
      // console.log("funs", funs);//评论等级

      this.spid += 1; //唯一ID
      let sptime = new Date(); //实例化一个日期对象

      // 评论保存方法
      let a = this.keys;
      let b = this.Videoids;
      console.log("a", a);
      console.log("b", b);
      let savespeak = () => {
        // console.log("videolists1", this.videolists[0]);
        this.savelists = JSON.parse(localStorage.getItem("videoLists")); //写入存储数组
        // this.savelists.videolists.findIndex(item => item.Videoids == b)
        this.savelists.videolists[
          this.savelists.videolists.findIndex((item) => item.Videoids == b)
        ] = this.videolists[0];
        // console.log(this.savelists.videolists);
        localStorage.setItem("videoLists", JSON.stringify(this.savelists)); //上传存储数组
      };

      // 日期方法
      let formatDate = (sptime) => {
        var y = sptime.getFullYear();
        var m = sptime.getMonth() + 1;
        m = m < 10 ? "0" + m : m;
        var d = sptime.getDate();
        d = d < 10 ? "0" + d : d;
        return y + "-" + m + "-" + d;
      };

      let val = {
        userName: "吃瓜者",
        speakid: this.spid,
        userHeader: "../assets/imgs/user-header.png",
        speak: this.values,
        sptimes: formatDate(sptime),
      };

      if (funs == 1) {
        //次级回复
        this.videolists[0].userTalk[index].reply.push(val);
        this.values = "";
        this.speakback = null;
        savespeak();
        return;
      } else if (funs == 2) {
        //次次级回复
        let findin = this.videolists[0].userTalk.findIndex(
          (item) => item.speakid == key
        );
        this.videolists[0].userTalk[findin].reply.push(val);
        // console.log(this.videolists[0].userTalk[findin].reply);
        this.values = "";
        this.speakback = null;
        savespeak();
        return;
      } else if (funs == 3) {
        // 一级回复
        let val2 = {
          userName: "吃瓜者",
          speakid: this.spid + "*",
          userHeader: "../assets/imgs/user-header.png",
          speak: this.vals,
          sptimes: formatDate(sptime),
          reply: [],
        };

        this.videolists[0].userTalk.push(val2);
        this.vals = "";
        this.speakback = null;
        // console.log(val2);
        // console.log("一级回复", this.videolists[0].userTalk);
        savespeak();
        return;
      }
    },

    //开始学习
    fristFun() {
      if (!this.showvideo) {
        this.showvideo = true; //显示视频组件
        this.vflag = this.videolists[0].VideoLists[0].video[0].id; //当前播放高亮
        // 返回顶部
        let html = document.documentElement;
        var timer = setInterval(() => {
          if (html.scrollTop <= 0) {
            clearInterval(timer);
          }
          html.scrollTop = html.scrollTop - 20;
        }, 10);
      }
    },

    // 点击视频名称回到顶部
    showvideoFun(free, id) {
      console.log("free", free);
      console.log("id", id);
      this.showvideo = true;
      this.vflag = id;
      this.kiriton = id;
      let html = document.documentElement;
      var timer = setInterval(() => {
        if (html.scrollTop <= 0) {
          clearInterval(timer);
        }
        html.scrollTop = html.scrollTop - 100;
      }, 10);
    },
  },
  created() {
    this.getKeys(); //获取数据列表
    this.getRightVideo(); //获推荐列表
    this.getVideoJsonDataFun(); //获取数据遍历数组
  },
  computed: {
    // 计算视频总数
    sum() {
      let nums = null;
      if (this.videolists) {
        // console.log(this.videolists[0].VideoLists);
        for (let key in this.videolists[0].VideoLists) {
          // console.log(this.videolists[0].VideoLists[key].video.length);
          nums += this.videolists[0].VideoLists[key].video.length;
        }
      }
      return nums;
    },
    // 计算评论总数
    spsum() {
      let temps = this.videolists[0].userTalk.length;
      if (this.videolists) {
        console.log(this.videolists[0].VideoLists);
        for (let key in this.videolists[0].userTalk) {
          console.log(this.videolists[0].userTalk[key].reply.length);
          temps += this.videolists[0].userTalk[key].reply.length;
        }
      }
      return temps;
    },
  },
  watch: {
    keys: function () {
      // console.log("keys11", this.keys === "hot");//测试
      // console.log("oldvideoLists",JSON.parse(localStorage.getItem("videoLists")));
      // console.log("savelists", this.savelists);

      this.savelists = JSON.parse(localStorage.getItem("videoLists")); //写入存储数组

      let oldlist = JSON.parse(localStorage.getItem("videoLists")).videolists;

      let newlists = oldlist.filter((item) => item.Keys == this.keys);
      this.videolists = newlists.filter(
        (item) => item.Videoids == this.Videoids
      );

      console.log("this.videolists", this.videolists);

      this.video = this.videolists[0].VideoLists[0].video[0].video;
      // console.log("this.videolists",this.videolists[0].VideoLists[0].video[0].video);
    },
  },
  components: {
    CourseVideo,

    // LoadingTag,
  },
};
</script>

<style lang="scss" scoped>
// 修改组件样式

.breadcrumb ::v-deep .el-breadcrumb__inner {
  color: #a3b9bb;
  cursor: pointer;
}

.breadcrumb ::v-deep .el-breadcrumb__inner:hover {
  color: #a3b9bb;
}

.breadcrumb ::v-deep .el-breadcrumb__inner.is-link:hover {
  color: #48c5a3;
  cursor: pointer;
}

.breadcrumb ::v-deep .is-link {
  color: #48c5a3;
  cursor: pointer;
}

.video-course-bg {
  width: 100%;
  overflow: hidden;
  position: relative;
  padding-bottom: 60px;
  .course-bg-nav {
    font-size: 14px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.5);
    padding: 20px 0 0;
    font-size: 14px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.5);
    padding: 20px 0 0;
    ul {
      li {
        a {
          color: rgba(255, 255, 255, 0.5);
        }
      }
    }
  }
  h1 {
    font-size: 30px;
    font-weight: 600;
    color: #fff;
    letter-spacing: 1px;
    padding: 12px 0;
  }
  .video-course-info {
    display: flex;
    align-items: center;
    .video-course-classinfo {
      font-size: 12px;
      font-weight: 400;
      color: #fff;
      span {
        margin-left: 40px;
        margin-right: 40px;
      }
    }
  }
}
.bg-filter,
.bg-filter-after {
  width: 100%;
  height: 100%;
  position: absolute;
  width: 100%;
  height: 100%;
  position: absolute;
}
.bg-filter {
  filter: blur(15px);
  z-index: -2;
}
.bg-filter-after {
  z-index: -1;
  background: rgba(0, 0, 0, 0.50196);
}
.breadcrumb {
  margin-top: 10px;
  padding: 15px 10px;
}
.user-body {
  display: inline-flex;
  color: #fff;
  img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 12px;
  }
  .user-name {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    max-width: 150px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    p {
      font-size: 16px;
      font-weight: 600;
    }
  }
}
.share-course-info-icon {
  margin-left: auto;
  i {
    cursor: pointer;
    font-size: 30px;
    margin-left: 22px;
    color: #48c5a3;
  }
}
.main-body {
  margin-top: -50px;
  position: relative;
}
.video-course-title {
  height: 70px;
  background: #fff;
  box-shadow: 0 5px 8px 0 rgb(0 0 0 / 4%);
  border-radius: 6px;
  display: flex;
  justify-content: space-between;
  .course-tab {
    display: flex;
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin-left: 30px;
    li {
      margin-right: 50px;
      line-height: 70px;
      cursor: pointer;
    }
  }
  .course-download {
    display: flex;
    margin-right: 17px;
    align-items: center;
  }
}
.video-course-title .course-tab .active,
.video-course-title .course-tab li:hover {
  color: #48c5a3;
  border-bottom: 2px solid #48c5a3;
}
.download-btn {
  font-size: 14px;
  font-weight: 500;
  color: #f76447;
  padding: 5px 12px;
  background: rgba(247, 100, 71, 0.21961);
  border-radius: 4px;
  height: 20px;
  margin-left: 20px;
  cursor: pointer;
}
.el-dialog__wrapper {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  margin: 0;
}
.el-dialog {
  position: relative;
  margin: 0 auto 50px;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
  width: 50%;
}
.el-dialog__header {
  padding: 20px 20px 10px;
}
.el-dialog__body {
  padding: 30px 20px;
  color: #606266;
  font-size: 14px;
  word-break: break-all;
}
.video-course-body {
  margin: 20px 0;
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  .video-course-left {
    width: 850px;
  }
  .video-course-right {
    width: 320px;
    margin-bottom: 200px;
    .video-course-learn {
      background: #fff;
      box-shadow: 0 0 24px 0 rgb(0 0 0 / 6%);
      border-radius: 6px;
      padding: 24px 17px;
      .dis-block {
        cursor: pointer;
        font-size: 18px;
        font-weight: 550;
        color: #fff;
        height: 44px;
        background: #48c5a3;
        border-radius: 22px;
        text-align: center;
        line-height: 44px;
      }
      h5 {
        font-size: 16px;
        font-weight: 600;
        color: #333;
        margin: 30px 0 11px;
      }
      p {
        line-height: 26px;
        font-size: 14px;
        font-weight: 400;
        color: #666;
      }
    }
    .video-course-recommend {
      margin-top: 20px;
      background: #fff;
      border-radius: 6px;
      padding: 0 17px;
    }
    .title {
      padding: 15px 0;
      display: flex;
      justify-content: space-between;
    }
    h4 {
      font-size: 18px;
      font-weight: 600;
      color: #333;
      line-height: 25px;
    }
  }
}
.video-course-left {
  .video-course-intro {
    padding: 19px 30px;
    background: #fff;
    box-shadow: 0 0 24px 0 rgb(0 0 0 / 6%);
    border-radius: 6px;
    color: #333;
    line-height: 26px;
    span {
      font-weight: 600;
    }
  }
}
.video-course-list {
  background: #fff;
  box-shadow: 0 0 24px 0 rgb(0 0 0 / 6%);
  border-radius: 6px;
  padding: 30px 20px;
  margin-top: 10px;
  p {
    &:first-of-type {
      font-size: 16px;
      font-weight: 600;
      color: #333;
      margin-bottom: 26px;
    }
  }
  .video-list-item.video-con {
    color: #48c5a3;
  }
  .video-list-item {
    display: flex;
    align-items: center;
    height: 28px;
    position: relative;
    padding: 10px 0;
    color: #666;
    box-shadow: 0px 0px 5px 0px #ccc;
    border-radius: 9px;
    margin-bottom: 10px;
    overflow: hidden;
    &:hover {
      background: #48c5a415;
      color: #48c5a3;
      cursor: pointer;
    }
    .list-box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      line-height: 28px;
      flex: 1;
      z-index: 6;
      padding: 10px;
      background: #fff;
      .VIP {
        font-size: 20px;
        color: #d7ba7d;
      }
    }
    a {
      display: flex;
      align-items: center;
    }
    i {
      font-size: 24px;
      margin-right: 16px;
    }
    .start-learn-btn {
      margin-left: auto;
      background: #48c5a3;
      border-radius: 4px;
      padding: 4px 6px;
      color: #fff;
      position: absolute;
      right: 10px;
      z-index: 5;
    }
  }
}
/* 右侧列表 */
.video-course-recommend {
  .video-course-recommend-ul {
    .li {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 17px 0;
      border-top: 1px solid #eee;
      img {
        border-radius: 4px;
        width: 90px;
        height: 61px;
      }
      span {
        font-weight: 400;
        line-height: 20px;
        display: inline-block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 110px;
        font-size: 12px;
      }
    }
    .userlist-ul-i {
      display: flex;
      justify-content: space-between;
      margin-top: 8px;
    }
  }
}
.video-comment {
  background: #fff;
  box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.06);
  border-radius: 6px;
}
.comment-box {
  .child-item {
    margin-left: 100px;
    padding: 15px 0;
    border-bottom: 1px solid #eee;
  }
}
.comment-form {
  display: flex;
  button {
    margin-left: 20px;
  }
}
.comment-item {
  padding: 10px 0;
}
.userinfo {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  .user-header {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    margin-right: 20px;
  }
  .user-name {
    p {
      font-size: 16px;
      font-weight: 600;
      color: #333;
    }
    span {
      font-size: 12px;
      font-weight: 400;
      color: #aaa;
    }
  }
}
.comment-content {
  margin: 0px 0 0 56px;
}
.comment-other-op {
  display: flex;
  margin: 10px 0;
  justify-content: flex-end;
  div {
    margin: 0 10px;
    color: #838ea3;
    display: flex;
    align-items: center;
    i {
      margin-right: 3px;
    }
  }
}
.el-input {
  position: relative;
  font-size: 14px;
  display: inline-block;
  width: 100%;
}
.el-input__inner {
  background-color: #fff;
  background-image: none;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  box-sizing: border-box;
  color: #606266;
  display: inline-block;
  font-size: inherit;
  height: 40px;
  line-height: 40px;
  outline: 0;
  padding: 0 15px;
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  width: 100%;
}

.comment-box .child-item,
.comment-box .main-item {
  padding: 15px 0;
  border-bottom: 1px solid #eee;
}
.flex,
.flex-bw {
  display: flex;
}
</style>